<template>
  <div>
    <div class="main">
      <div class="discover-module">
        <div class="g-wrap3">
          <div class="n-bill">
            <div class="main-left">
              <div class="v-hd2">
                <router-link :to="{name:'PlayList',params:{name:'全部'}}" class="hotText">热门推荐</router-link>
                <ul class="tab">
                  <li v-for="(item,index) in HotTaps" :key="index">
                    <router-link :to="{name:'PlayList',params:{name:item.name}}" :title="item.name">{{ item.name }}
                    </router-link>
                    <span v-if="index!==4">|</span>
                  </li>
                </ul>
                <div class="more">
                  <router-link :to="{name:'PlayList',params:{name:'全部'}}">更多</router-link>
                  <i></i>
                </div>
              </div>
              <div class="cvrlst">
                <ul class="cvrlst-ul">
                  <li v-for="(item,index) in HotSongList" :key="index">
                    <div class="cover">
                      <img v-lazy="item.picUrl" alt="">
                      <router-link :to="{name:'RecommendDetail',params:{id:item.id}}" class="img-rink"
                                   :title="item.name"></router-link>
                      <div class="bottom">
                        <a href="javascript:;" class="bofang" title="播放" @click.prevent="addSong(item.id)"></a>
                        <span class="erji"></span>
                        <span class="people-num">{{ formatNumber(item.playCount) }}</span>
                      </div>
                    </div>
                    <p class="bottom-text">
                      <router-link :to="{name:'RecommendDetail',params:{id:item.id}}" :title="item.name">
                        {{ item.name }}
                      </router-link>
                    </p>
                  </li>
                </ul>
              </div>
            </div>
            <div class="main-next">
              <div class="v-hd2">
                <router-link :to="{name:'TopDetail',params:{id:19723756}}" class="hotText">榜单</router-link>
                <div class="more">
                  <router-link :to="{name:'TopDetail',params:{id:19723756}}">更多</router-link>
                  <i></i>
                </div>
              </div>
              <div class="n-disk">
                <div class="blk" v-for="item in list" :key="item.id">
                  <div class="top">
                    <div class="u-cover-4">
                      <router-link :to="{name:'TopDetail',params:{id:item.id}}" :title="item.name">
                        <img v-lazy="item.coverImgUrl"
                             alt="">
                      </router-link>
                    </div>
                    <div class="u-cover-5">
                      <router-link :to="{name:'TopDetail',params:{id:item.id}}" :title="item.name"><h3>
                        {{ item.name }}</h3></router-link>
                      <div class="btn">
                        <a href="javascript:;" title="播放" @click.prevent="addList(item.tracks)"></a>
                        <a href="javascript:;" title="收藏"></a>
                      </div>
                    </div>
                  </div>
                  <div class="songs-list" v-if="item.tracks">
                    <div class="song-item" v-for="(i,index) in item.tracks.slice(0,10)" :key="i.id">
                      <span class="num">{{ index + 1 }}</span>
                      <router-link :to="{name:'SongDetail',params:{id:i.id}}" class="song-name" :title="i.name">
                        {{ i.name }}
                      </router-link>
                      <div class="oper">
                        <a href="javascript:;" class=" s-bg-11" title="播放" @click.prevent="sentSongUrl(i)"></a>
                        <a href="javascript:;" class=" u-icn-81" title="添加到播放列表" @click.prevent="addSongList(i)"></a>
                        <a href="javascript:;" class=" s-bg-12" title="收藏"></a>
                      </div>
                    </div>
                    <div class="more">
                      <router-link :to="{name:'TopDetail',params:{id:item.id}}">查看全部</router-link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="n-rcmd">
          <div class="n-user-profile" v-if="JSON.stringify(userinfo)==='{}'">
            <p class="s-fc3">登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
            <a href="javascript:;" @click.prevent="login">用户登录</a>
          </div>
          <div class="n-user" v-if="JSON.stringify(userinfo)!=='{}'">
            <div class="myinfo">
              <div class="f-cb">
                <router-link :to="{name:'UserDetailView',params:{id:profile.userId,type:1}}" class="head">
                  <img v-lazy="userinfo.avatarUrl"
                       alt="">
                </router-link>
                <div class="info">
                  <h4 style="height: 20px;">
                    <router-link :to="{name:'UserDetailView',params:{id:profile.userId,type:1}}" class="nm-icn f-thlde"
                                 :title="userinfo.nickname">{{ userinfo.nickname }}
                    </router-link>
                    <span class="vip-level"></span>
                  </h4>
                  <p style="margin-top: 5px">
                    <a href="#" class="icn2">
                      {{ level }}
                      <i class="lvright"></i>
                    </a>
                  </p>
                  <div class="btnwrap">
                    <a href="javascript:;" class="sign">
                      <i>签 到</i>
                    </a>
                  </div>
                </div>
              </div>
              <ul class="dny">
                <li>
                  <router-link :to="{name:'Event',query:{id:userinfo.userId}}">
                    <strong>{{ profile.eventCount }}</strong>
                    <span>动态</span>
                  </router-link>
                </li>
                <li class="vertical"></li>
                <li>
                  <router-link :to="{name:'Follows',query:{id:userinfo.userId}}">
                    <strong>{{ profile.follows }}</strong>
                    <span>关注</span>
                  </router-link>
                </li>
                <li class="vertical"></li>
                <li>
                  <router-link :to="{name:'Fans',query:{id:userinfo.userId}}">
                    <strong>{{ profile.followeds }}</strong>
                    <span>粉丝</span>
                  </router-link>
                </li>
              </ul>
            </div>
          </div>
          <div class="n-singer">
            <div class="v-hd3">
              <span class="singer">入驻歌手</span>
              <router-link :to="{name:'ArtistView'}">查看全部></router-link>
            </div>
            <ul class="singer-list">
              <li v-for="(item,index) in HotSingers" :key="index">
                <router-link :to="{name:'UserDetail',params:{id:item.accountId}}" v-if="item.accountId">

                  <img v-lazy="item.img1v1Url" alt="">
                  <div class="info" v-if="item.alias">
                    <h4>{{ item.name }}</h4>
                    <span>{{ item.alias[0] }}</span>
                  </div>
                </router-link>
                <router-link :to="{name:'Work',params:{id:item.id}}" v-else>

                  <img v-lazy="item.img1v1Url" alt="">
                  <div class="info" v-if="item.alias">
                    <h4>{{ item.name }}</h4>
                    <span>{{ item.alias[0] }}</span>
                  </div>
                </router-link>
              </li>
            </ul>
          </div>
          <div class="shenqing">
            <a href="#">申请成为网易音乐人</a>
          </div>
          <div class="n-dj">
            <div class="v-hd3">
              <span class="singer">热门主播</span>
            </div>
            <ul class="n-hotdj">
              <li v-for="(item,index) in DjTopList" :key="index">
                <router-link :to="{name:'UserDetailView',params:{id:item.id,type:0}}">
                  <img v-lazy="item.avatarUrl" alt="">

                </router-link>
                <div class="info">
                  <p>
                    <router-link :to="{name:'UserDetail',params:{id:item.id}}">{{ item.nickName }}</router-link>
                  </p>
                  <p>{{ formatNumber(item.score) }}</p>
                </div>
              </li>
            </ul>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import {formatNumber} from '@/utils/formatNumber'
import {reqSongListDetail} from "@/http/api";
export default {
  name: "index",
  data() {
    return {
      playlists: [],
      formatNumber: formatNumber,
      飙升榜: '19723756',
      新歌榜: '3779629',
      原创榜: '2884035',
      list: [],
      level: '',
    }
  },
  methods: {
    async login(){
      this.$bus.$emit('login')
    },
    async Level() {
      const result = await this.$API.reqUserLevel(this.$store.state.track.user.cookies);
      if (result.data.code == 200) {
        this.level = result.data.data.level
      } else {
        return new Promise(reject => {
          reject('fail')
        })
      }

    },
    async addSong(id) {
      let result = await reqSongListDetail(id)
      let list = result.data.playlist.tracks
      this.$store.commit('track/addMusic', list)
      this.$store.commit('track/SETMUSIC', list[0])
    },
    addList(list) {
      this.$store.commit('track/SETMUSIC', list[0])
      this.$store.commit('track/addMusic', list)
    },
    sentSongUrl(i) {
      this.$store.commit('track/SETMUSIC', i)
    },
    addSongList(i) {
      this.$store.commit('track/ADDMUSICLIST', i)
    },
    async getSongList() {
      let result1 = await this.$API.reqSongListDetail(this.飙升榜)
      let result2 = await this.$API.reqSongListDetail(this.新歌榜)
      let result3 = await this.$API.reqSongListDetail(this.原创榜)
      this.list.push(result1.data.playlist)
      this.list.push(result2.data.playlist)
      this.list.push(result3.data.playlist)
    },
    SendHotRecommend(id) {
      this.$router.push({name: 'RecommendDetail', params: {id: id}})
    },
  },
  mounted() {
    this.getSongList()
    this.$store.dispatch('songList/getHotSongList')
    this.$store.dispatch('songList/getHotSongTaps')
    this.$store.dispatch('songList/getHotSinger')
    this.$store.dispatch('songList/getDjTopList')
    // this.Account()
    this.Level()
    this.$store.dispatch('userInfo/Account',this.$store.state.track.user.cookies)
  },
  activated() {
    window.location.reload()
  },
  computed: {
    ...mapState('songList', ['HotSongList', 'HotTaps', 'HotSingers', 'DjTopList']),
    ...mapState('userInfo',['userinfo','profile'])
  },

}
</script>

<style scoped lang="less">
.main {
  width: 100%;
  height: 1425px;
  color: #F5F5F5;
  box-sizing: border-box;

  .discover-module {
    width: 980px;
    height: 100%;
    margin: 0 auto;
    color: #FFFFFF;
    border-left: 1px solid #D3D3D3;
    border-right: 1px solid #D3D3D3;

    .g-wrap3 {
      float: left;
      height: 1450px;

      .n-bill {
        width: 729px;
        height: 1450px;

        .main-left {
          width: 689px;
          height: 523px;
          margin: 0 auto;

          .v-hd2 {
            width: 100%;
            height: 35px;
            margin-top: 25px;
            border-bottom: 2px solid #C10D0C;
            background: url("../../assets/index.png") no-repeat -225px -156px;

            .hotText {
              float: left;
              font-size: 20px;
              font-weight: normal;
              line-height: 28px;
              margin-left: 35px;
              color: #3B3835;
            }

            .tab {
              float: left;
              margin: 7px 0 0 20px;

              li {
                float: left;
                //margin: 0 10px;
                a {

                  color: #666;
                }

                span {
                  color: #666;
                  margin: 0 15px;
                }
              }
            }

            .more {
              float: right;
              width: 40px;
              height: 16px;
              margin: 7px 0 0 20px;

              a {
                color: #666;
              }

              i {
                display: inline-block;
                width: 12px;
                vertical-align: middle;
                margin-left: 4px;
                height: 12px;
                background: url("../../assets/index.png") 0 -240px;
              }
            }
          }

          .cvrlst {

            .cvrlst-ul {
              margin-top: 20px;
              width: 689px;
              height: 468px;
              display: flex;
              justify-content: space-between;
              flex-wrap: wrap;

              li {
                float: left;
                width: 140px;
                height: 204px;

                .cover {
                  position: relative;

                  img {
                    width: 140px;
                    height: 140px;
                  }

                  .img-rink {
                    width: 140px;
                    height: 140px;
                    display: inline-block;
                    position: absolute;
                    top: 0;
                    left: 0;
                  }

                  .bottom {
                    width: 140px;
                    height: 27px;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    background: url("../../assets/coverall.png") no-repeat 0 -540px;

                    .bofang {
                      display: inline-block;
                      width: 16px;
                      height: 17px;
                      background: url("../../assets/iconall.png") 0 0;
                      position: absolute;
                      right: 10px;
                      bottom: 6px;
                    }

                    .erji {
                      width: 14px;
                      height: 11px;
                      display: inline-block;
                      position: absolute;
                      bottom: 9px;
                      left: 10px;
                      background: url("../../assets/iconall.png") no-repeat 0 -24px;
                    }

                    .people-num {
                      position: absolute;
                      bottom: 7px;
                      left: 30px;
                    }
                  }
                }

                .bottom-text {
                  margin: 8px 0 3px;
                  font-size: 14px;
                  width: 100%;

                  a {
                    display: inline-block;
                    max-width: 100%;
                    color: #000;
                    vertical-align: middle;
                  }
                }
              }
            }
          }
        }

        .main-next {
          width: 689px;
          height: 243px;
          margin: 0 auto;

          .v-hd2 {
            width: 100%;
            height: 35px;
            margin-top: 25px;
            border-bottom: 2px solid #C10D0C;
            background: url("../../assets/index.png") no-repeat -225px -156px;

            .hotText {
              float: left;
              font-size: 20px;
              font-weight: normal;
              line-height: 28px;
              margin-left: 35px;
              color: #3B3835;
            }

            .tab {
              float: left;
              margin: 7px 0 0 20px;

              li {
                float: left;
                //margin: 0 10px;
                a {
                  color: #666;
                }

                span {
                  color: #666;
                  margin: 0 15px;
                }
              }
            }

            .more {
              float: right;
              width: 40px;
              height: 16px;
              margin: 7px 0 0 20px;

              a {
                color: #666;
              }

              i {
                display: inline-block;
                width: 12px;
                vertical-align: middle;
                margin-left: 4px;
                height: 12px;
                background: url("../../assets/index.png") 0 -240px;
              }
            }
          }

          .n-disk {
            width: 100%;
            height: 472px;
            margin-top: 20px;
            display: flex;
            background-color: #F5F5F5;

            .blk {
              flex: 1;
              border: 1px solid #D5D5D5;

              .top {
                height: 100px;
                padding: 20px 0 0 19px;

                .u-cover-4 {
                  float: left;
                  width: 80px;
                  height: 80px;

                  a {
                    width: 80px;
                    height: 80px;
                    display: inline-block;

                    img {
                      width: 100%;
                      height: 100%;
                    }
                  }
                }

                .u-cover-5 {
                  float: right;
                  width: 116px;
                  height: 50px;

                  h3 {
                    font-size: 14px;
                    color: #000;
                  }

                  .btn {
                    a {
                      width: 22px;
                      height: 22px;
                      display: inline-block;
                      float: left;
                      margin: 10px 0;

                      &:nth-child(1) {
                        background: url("../../assets/index.png") no-repeat -267px -205px;
                        margin-right: 10px;

                        &:hover {
                          background-position: -267px -235px;
                          cursor: pointer;
                        }
                      }

                      &:nth-child(2) {
                        background: url("../../assets/index.png") no-repeat -300px -205px;

                        &:hover {
                          background-position: -300px -235px;
                          cursor: pointer;
                        }
                      }
                    }
                  }
                }
              }

              .songs-list {
                div {
                  &:nth-child(odd) {
                    background: #E8E8E8;
                  }

                  &:nth-child(-n+3) {
                    .num {
                      color: #C10D0C;
                    }
                  }
                }

                .song-item {
                  width: 100%;
                  height: 32px;
                  overflow: hidden;
                  white-space: nowrap;

                  &:hover .oper {
                    display: block;
                  }

                  &:hover .song-name {
                    width: 95px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;

                  }

                  .oper .u-icn-81 {
                    margin: 2px 6px 0 0;
                  }

                  .oper {
                    display: none;
                    float: right;
                    width: 80px;
                    margin-top: 7px;

                    a {
                      float: left;
                      width: 17px;
                      height: 17px;
                      margin-right: 10px;

                    }

                    .s-bg-11 {
                      background: url("../../assets/index.png") no-repeat -267px -268px;

                      &:hover {
                        background-position: -267px -288px;
                        cursor: pointer;
                      }
                    }

                    .u-icn-81 {
                      background: url("../../assets/icon.png") no-repeat 0 -700px;

                      &:hover {
                        background-position: -22px -700px;
                      }
                    }

                    .s-bg-12 {
                      background: url("../../assets/index.png") no-repeat -297px -268px;

                      &:hover {
                        background-position: -297px -288px;
                        cursor: pointer;
                      }
                    }
                  }


                  span {
                    float: left;
                    vertical-align: middle;
                  }

                  .song-name {
                    color: #333;
                    height: 32px;
                    width: 180px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    display: inline-block;
                    line-height: 32px;
                  }

                  .num {
                    float: left;
                    text-align: center;
                    color: #666;
                    margin-left: 15px;
                    font-size: 16px;
                    width: 35px;
                    height: 32px;
                    line-height: 32px;

                  }

                  .bg-color {
                    background: #E8E8E8;
                  }

                  .red-active {
                    color: #C10D0C;
                  }
                }

                .more {

                  clear: both;
                  height: 32px;
                  width: 100%;

                  text-align: right;
                  line-height: 32px;

                  a {
                    color: #666;
                    margin-right: 32px;
                  }
                }
              }
            }

          }
        }
      }
    }

    .n-rcmd {
      width: 250px;
      height: 920px;
      float: left;

      .n-user-profile {
        width: 250px;
        height: 126px;
        background-color: #E9E9E9;
        border-bottom: 2px solid #B8B8B8;

        .s-fc3 {
          padding-top: 16px;
          width: 205px;
          height: 76px;
          text-align: center;
          line-height: 22px;
          color: #666;
          margin: 0 auto;

        }

        a {
          width: 100px;
          height: 31px;
          color: #fff;
          display: block;
          margin: 0 auto;
          text-shadow: 0 1px 0 #8a060b;
          text-align: center;
          line-height: 31px;
          background-color: #CF0F16;
        }
      }

      .n-user {
        .myinfo {
          height: 165px;
          padding-top: 20px;
          background-position: 0 -270px;
          background-image: url("../../assets/index.png");

          .f-cb {
            &:after {
              clear: both;
              content: '.';
              display: block;
              height: 0;
              visibility: hidden;
            }

            .head {
              float: left;
              width: 80px;
              height: 80px;
              margin-left: 20px;
              _margin-left: 10px;
              padding: 2px;
              background: #fff;
              border: 1px solid #dadada;
              position: relative;
              zoom: 1;

              img {
                display: block;
                width: 80px;
                height: 80px;
              }
            }

            .info {
              float: left;
              width: 115px;
              margin-left: 18px;
              padding-top: 3px;

              h4 {
                font-size: 100%;

                .nm-icn {
                  width: auto;
                  max-width: 60px !important;
                  float: left;
                  font-size: 14px;
                  color: #333;
                  vertical-align: middle;
                }

                .vip-level {
                  width: 43px;
                  height: 16px;
                  background-size: auto 15px;
                  background-repeat: no-repeat;
                  background-position: center;
                  float: left;
                  margin-left: 5px;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  background-image: url("../../assets/vip-1.png");
                }
              }

              p {
                .icn2 {
                  display: inline-block;
                  height: 17px;
                  overflow: hidden;
                  padding-left: 25px;
                  line-height: 18px;
                  color: #999;
                  font-weight: bold;
                  font-style: italic;
                  vertical-align: middle;
                  background-image: url("../../assets/icon2.png");
                  background-position: -130px -64px;

                  .lvright {
                    width: 8px;
                    height: 17px;
                    float: right;
                    display: inline-block;
                    overflow: hidden;
                    vertical-align: middle;
                    background-image: url("../../assets/icon2.png");

                    background-position: -192px -64px;
                  }
                }
              }

              .btnwrap {
                margin-top: 15px;
                position: relative;

                .sign, .sign i {
                  display: inline-block;
                  *display: inline;
                  *zoom: 1;
                  height: 31px;
                  line-height: 31px;
                  overflow: hidden;
                  *line-height: 32px;
                  vertical-align: top;
                  text-align: center;
                  cursor: pointer;
                  background-image: url("../../assets/button2.png");
                }

                .sign {
                  color: #fff;
                  background-position: right -428px;
                  padding: 0 5px 0 0;
                  white-space: nowrap;

                  &:hover {
                    background-position: right -510px;
                  }

                  &:hover i {
                    background-position: 0 -469px;
                  }

                  i {
                    width: 60px;
                    color: #fff;
                    background-position: 0 -387px;
                    padding: 0 15px 0 20px;
                    pointer-events: none;

                  }
                }
              }
            }
          }

          .dny {
            position: relative;
            display: flex;
            justify-content: space-between;
            margin-top: 22px;
            padding: 0 25px;

            li {
              height: 40px;

              a {
                display: block;
                color: #666;

                strong {
                  display: block;
                  font-size: 20px;
                  font-weight: normal;
                  white-space: nowrap;
                }

                span {
                  margin-left: 2px;
                }
              }
            }

            .vertical {
              height: 40px;
              background-color: #e4e4e4;
              width: 1px;
            }
          }
        }
      }

      .n-singer {
        .v-hd3 {

          margin: 20px auto;
          width: 210px;
          height: 24px;
          border-bottom: 1px solid #CCCCCC;

          .singer {
            float: left;
            color: #000;
            font-weight: 800;
            font-size: 12px;
          }

          a {
            float: right;
            color: #666;
            font-size: 12px;
          }
        }

        .singer-list {
          width: 230px;
          height: 380px;
          margin: 0 20px;

          li {
            width: 210px;
            height: 62px;
            margin-bottom: 10px;
            background-color: #F4F4F4;

            a {
              width: 100%;
              height: 100%;
              display: inline-block;

              img {
                float: left;
                width: 62px;
                height: 62px;
              }

              .info {
                float: left;
                width: 148px;
                height: 62px;

                h4 {
                  color: #333333;
                  font-size: 14px;
                  margin: 10px;
                }

                span {
                  color: #666;
                  margin: 0 10px;
                }
              }
            }
          }
        }
      }

      .shenqing {
        width: 210px;
        height: 31px;
        margin-top: -15px;
        background-color: #F1F1F1;
        text-align: center;
        line-height: 31px;
        margin-left: 20px;
        border: 1px solid #C3C3C3;

        a {
          color: #333333;
          font-weight: 600;
        }
      }

      .n-dj {
        width: 250px;
        height: 294px;
        margin-top: 30px;

        .v-hd3 {

          margin: 20px auto;
          width: 210px;
          height: 24px;
          border-bottom: 1px solid #CCCCCC;

          .singer {
            float: left;
            color: #000;
            font-weight: 800;
            font-size: 12px;
          }
        }

        .n-hotdj {
          width: 230px;
          margin: 0 auto;

          li {
            width: 210px;
            height: 50px;

            a {
              display: inline-block;
              width: 40px;
              height: 40px;
              float: left;

              img {
                width: 40px;
                height: 40px;
              }
            }

            .info {
              float: left;
              width: 160px;
              height: 43px;

              p {
                width: 100%;
                margin: 0 10px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;

                &:nth-child(1) {
                  color: #000;
                  margin-top: 5px;
                  margin-bottom: 5px;

                  a {
                    height: 100%;
                    color: #000;
                    display: inline-block;
                  }
                }

                &:nth-child(2) {
                  color: #666;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>